<template>
  <div style="height: calc(100vh - 195px);overflow: auto;">
    <div class="name_aside RightCardTitle">流量信息统计</div>
    <div id="llfxChart" style="width:100%; height: 17rem;" />
    <div class="name_aside RightCardTitle">流量信息详情</div>
    <div class="tableBox">
      <div class="titleList">
        <span>河段编码</span>
        <span>影响村庄<br>数量</span>
        <span>村庄人口<br>(人)</span>
        <span>洪峰流量<br>(m³/s)</span>
        <span>峰现时间</span>
      </div>
      <el-collapse accordion>
        <el-collapse-item v-for="(item, index) in dataList" :key="index" :class="'FlowColorLevel' + item.level">
          <template slot="title">
            {{ item.levelName }} <span class="rightTitle">{{ item.rcount }}条河流</span>
          </template>
          <div class="stationLst">
            <ul>
              <template v-if="item.rvcdList.length > 0">
                <li v-for="(stationRvcdList, indexRvcdList) in item.rvcdList" :key="indexRvcdList"
                  @click="onClickShowDetail(stationRvcdList)">
                  <span>{{ stationRvcdList.rvcd }}</span>
                  <span>{{ stationRvcdList.adcdCount }}</span>
                  <span>{{ stationRvcdList.pCount }}</span>
                  <span>{{ stationRvcdList.maxq }}</span>
                  <span>{{ $moment(stationRvcdList.mxtm).format("MM-DD HH:mm") }}</span>
                </li>
              </template>
              <template v-else>
                <div class="noDataList">暂无数据</div>
              </template>
            </ul>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'FloodAnalysisInfo'" mask
      style="width: 75%;height: 80%;position: fixed;left: 15%;top: 10%;">
      <template v-slot:title>
        流量分析详情
      </template>
      <template v-slot:body>
        <FlowAnalysisInfo />
      </template>
    </Dlgdiv>
  </div>
</template>

<script>
import FlowAnalysisInfo from '../ShortPro/FlowAnalysisInfo.vue'
import {
  GetFlowList
} from '@/api/zyx.js'
export default {
  components: {
    FlowAnalysisInfo
  },
  data() {
    return {
      dataList: [],
      myChart: {},
      pieData: [],
      pieName: [],
      perioD_END: ''
    }
  },
  created() {
    this.$eventBus.$on('EB_YB_HS_Card_Click', res => {
      this.GetData(res)
      this.perioD_END = this.$moment(res.perioD_END).format('YYYY-MM-DD HH:mm:ss')
    })
    this.$eventBus.$on('chartdata', res => {
      this.pieData = []
      const arr = []
      for (const i in res) {
        arr.push(res[i])
      }
      for (var j = 0; j < arr.length - 1; j++) {
        this.pieData.push({
          value: arr[j + 1],
          name: arr[j]
        })
        j += 1
      }
      this.getPieEchart()
    })
  },
  methods: {
    onClickShowDetail(data) {
      data.perioD_END = this.perioD_END
      const dlgParams = this.$store.getters.dlgParams
      dlgParams.name = 'FloodAnalysisInfo'
      dlgParams.params = data
      this.$store.dispatch('dlgParams', dlgParams)
    },
    GetData(paramList) { // 对接列表数据
      this.isLoading = true
      const param = {
        dtTime: this.$moment(paramList.perioD_END).format('YYYY-MM-DD HH:mm:ss'),
        wswscd: paramList.wswscd
      }
      GetFlowList(param).then((res) => {
        this.isLoading = false
        if (res.isSuccess) {
          this.dataList = res.data.filter(function (item, index) {
            return item.rvcdList.length > 0
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getPieEchart() {
      const colorList = ['#C93EC0', '#964FD2', '#EF3C45', '#F2A408', '#E8E500', '#309EF3', '#7FD165']
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          right: '10%',
          top: '30%',
          orient: 'vertical'
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: ''
        },
        color: colorList,
        series: [{
          type: 'pie',
          label: {
            show: true,
            color: '',
            formatter: '{c} \n {b}' // b代表名称，c代表对应值，d代表百分比
          },
          radius: ['30%', '60%'], // 饼图半径
          data: this.pieData.map((item, index) => {
            item.label = {
              color: colorList[index]
            }
            return item
          })
        }]
      }
      this.myChart = this.$echarts.init(document.getElementById('llfxChart'))
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.tableBox {
  font-size: 12px;
  line-height: 17px;
}

.stationLst ul li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stationLst ul li {
  cursor: pointer;
}

/deep/.el-collapse-item__header {
  font-weight: bold;
  font-size: 14px;
  padding-left: 15px;
  position: relative;
}

/deep/.el-collapse-item__content {
  padding: 0;
  color: #FFFFFF;
}

.FlowColorLevel1 {
  /deep/.el-collapse-item__header {
    color: #7FD165 !important;
    background-color: rgba(127, 209, 101, .15);
  }
}

.FlowColorLevel2 {
  /deep/.el-collapse-item__header {
    color: #309EF3 !important;
    background-color: rgba(48, 158, 243, .15);
  }
}

.FlowColorLevel3 {
  /deep/.el-collapse-item__header {
    color: #E8E500 !important;
    background-color: rgba(232, 229, 0, .15);
  }
}

.FlowColorLevel4 {
  /deep/.el-collapse-item__header {
    color: #F2A408 !important;
    background-color: rgba(242, 164, 8, .15);
  }
}

.FlowColorLevel5 {
  /deep/.el-collapse-item__header {
    color: #EF3C45 !important;
    background-color: rgba(239, 60, 69, .15);
  }
}

.FlowColorLevel6 {
  /deep/.el-collapse-item__header {
    color: #964FD2 !important;
    background-color: rgba(150, 79, 210, .15);
  }
}

.FlowColorLevel7 {
  /deep/.el-collapse-item__header {
    color: #C93EC0 !important;
    background-color: rgba(201, 62, 192, .15);
  }
}

.rightTitle {
  position: absolute;
  right: 28px;
}
</style>
